<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>消消乐游戏</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 自定义配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#6366f1',
                        secondary: '#8b5cf6',
                        accent: '#ec4899',
                        success: '#10b981',
                        warning: '#f59e0b',
                        danger: '#ef4444',
                        background: '#f8fafc',
                        surface: '#ffffff'
                    },
                    fontFamily: {
                        game: ['Poppins', 'sans-serif']
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .gem-shadow {
                filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
            }
            .game-container {
                perspective: 1000px;
            }
            .gem {
                transition: all 0.3s ease;
                transform-style: preserve-3d;
            }
            .gem:hover {
                transform: scale(1.05);
                filter: brightness(1.1);
            }
            .gem-removed {
                animation: pop-out 0.3s ease-in-out;
            }
            .gem-falling {
                transition: transform 0.4s ease-in-out;
            }
            .gem-matching {
                animation: pulse 0.5s infinite alternate;
            }
            @keyframes pop-out {
                0% { transform: scale(1); opacity: 1; }
                50% { transform: scale(1.2); opacity: 0.8; }
                100% { transform: scale(0); opacity: 0; }
            }
            @keyframes pulse {
                0% { transform: scale(1); }
                100% { transform: scale(1.1); }
            }
            .btn-game {
                transition: all 0.3s ease;
            }
            .btn-game:hover {
                transform: translateY(-2px);
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            }
            .btn-game:active {
                transform: translateY(0);
            }
            .fade-in {
                animation: fadeIn 0.5s ease-in;
            }
            @keyframes fadeIn {
                0% { opacity: 0; }
                100% { opacity: 1; }
            }
            .slide-in {
                animation: slideIn 0.5s ease-out;
            }
            @keyframes slideIn {
                0% { transform: translateY(-20px); opacity: 0; }
                100% { transform: translateY(0); opacity: 1; }
            }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-slate-50 to-slate-100 min-h-screen flex flex-col items-center justify-center font-game">
    <!-- 游戏容器 -->
    <div class="game-container w-full max-w-4xl mx-auto p-4 flex flex-col items-center">
        <!-- 游戏标题 -->
        <div class="mb-6 text-center slide-in">
            <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent mb-2">
                炫彩消消乐
            </h1>
            <p class="text-slate-600 text-lg">匹配相同颜色的宝石，挑战多个关卡！</p>
        </div>

        <!-- 游戏开始界面 -->
        <div id="start-screen" class="w-full max-w-md bg-white rounded-2xl p-8 shadow-lg fade-in">
            <div class="flex flex-col gap-6">
                <div class="text-center">
                    <h2 class="text-2xl font-bold text-slate-800 mb-2">选择难度</h2>
                    <p class="text-slate-500">难度越高，关卡越复杂</p>
                </div>
                
                <div class="grid grid-cols-3 gap-4">
                    <button id="easy-btn" class="btn-game bg-green-500 hover:bg-green-600 text-white py-4 px-6 rounded-xl font-bold text-lg shadow-md">
                        简单
                    </button>
                    <button id="medium-btn" class="btn-game bg-blue-500 hover:bg-blue-600 text-white py-4 px-6 rounded-xl font-bold text-lg shadow-md">
                        中等
                    </button>
                    <button id="hard-btn" class="btn-game bg-red-500 hover:bg-red-600 text-white py-4 px-6 rounded-xl font-bold text-lg shadow-md">
                        困难
                    </button>
                </div>
                
                <div class="text-center text-sm text-slate-400">
                    <p>使用鼠标点击并交换相邻的宝石来匹配三个或更多相同颜色</p>
                </div>
            </div>
        </div>

        <!-- 游戏界面 (默认隐藏) -->
        <div id="game-screen" class="w-full hidden">
            <!-- 游戏信息 -->
            <div class="game-info flex flex-wrap justify-between items-center gap-4 mb-6 bg-white p-4 rounded-xl shadow-md slide-in">
                <div class="flex items-center gap-3">
                    <div class="bg-primary/10 text-primary px-4 py-2 rounded-lg">
                        <span class="font-bold">关卡:</span> <span id="level-display">1</span>
                    </div>
                    <div class="bg-secondary/10 text-secondary px-4 py-2 rounded-lg">
                        <span class="font-bold">目标:</span> <span id="score-target">1000</span>
                    </div>
                    <div class="bg-accent/10 text-accent px-4 py-2 rounded-lg">
                        <span class="font-bold">得分:</span> <span id="score-display">0</span>
                    </div>
                    <div class="bg-warning/10 text-warning px-4 py-2 rounded-lg">
                        <span class="font-bold">步数:</span> <span id="moves-display">30</span>
                    </div>
                </div>
                <button id="restart-btn" class="btn-game bg-slate-700 hover:bg-slate-800 text-white py-2 px-6 rounded-lg font-bold flex items-center gap-2">
                    <i class="fa fa-refresh"></i> 重新开始
                </button>
            </div>

            <!-- 游戏区域 -->
            <div class="game-board bg-white p-6 rounded-2xl shadow-lg mb-6 relative">
                <div id="gem-grid" class="grid gap-2 mx-auto"></div>
            </div>
        </div>

        <!-- 游戏结束界面 (默认隐藏) -->
        <div id="game-over-screen" class="hidden bg-white rounded-2xl p-8 shadow-lg max-w-md w-full fade-in">
            <div class="text-center">
                <h2 id="game-over-title" class="text-3xl font-bold text-slate-800 mb-4">游戏结束</h2>
                <p id="game-over-message" class="text-xl text-slate-600 mb-6">步数用完了！</p>
                <div class="mb-6">
                    <p class="text-lg mb-2"><span class="font-bold">得分:</span> <span id="final-score">0</span></p>
                    <p class="text-lg"><span class="font-bold">关卡:</span> <span id="final-level">1</span></p>
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <button id="retry-btn" class="btn-game bg-primary hover:bg-primary/90 text-white py-3 px-6 rounded-xl font-bold text-lg shadow-md">
                        重试
                    </button>
                    <button id="main-menu-btn" class="btn-game bg-slate-700 hover:bg-slate-800 text-white py-3 px-6 rounded-xl font-bold text-lg shadow-md">
                        主菜单
                    </button>
                </div>
            </div>
        </div>

        <!-- 关卡完成界面 (默认隐藏) -->
        <div id="level-complete-screen" class="hidden bg-white rounded-2xl p-8 shadow-lg max-w-md w-full fade-in">
            <div class="text-center">
                <div class="mb-4">
                    <i class="fa fa-trophy text-6xl text-yellow-400"></i>
                </div>
                <h2 class="text-3xl font-bold text-slate-800 mb-4">关卡完成！</h2>
                <p class="text-xl text-slate-600 mb-6">恭喜您通过了这一关卡！</p>
                <div class="mb-6">
                    <p class="text-lg mb-2"><span class="font-bold">得分:</span> <span id="level-score">0</span></p>
                    <p class="text-lg mb-2"><span class="font-bold">剩余步数:</span> <span id="remaining-moves">0</span></p>
                    <p class="text-lg mb-2"><span class="font-bold">奖励:</span> <span id="bonus-score">0</span></p>
                    <p class="text-lg font-bold text-success"><span>总得分:</span> <span id="total-level-score">0</span></p>
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <button id="next-level-btn" class="btn-game bg-success hover:bg-success/90 text-white py-3 px-6 rounded-xl font-bold text-lg shadow-md">
                        下一关
                    </button>
                    <button id="level-complete-main-menu-btn" class="btn-game bg-slate-700 hover:bg-slate-800 text-white py-3 px-6 rounded-xl font-bold text-lg shadow-md">
                        主菜单
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 游戏逻辑 -->
    <script src="game.js"></script>
</body>
</html>